<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keywords" content="">
    <meta name="robots" content="all">
    <title>I家政</title>

    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="new/css/bootstrap.min.css">
    <!-- Customizable CSS -->
    <link rel="stylesheet" href="new/css/main.css">
    <link rel="stylesheet" href="new/css/blue.css">
    <link rel="stylesheet" href="new/css/owl.carousel.css">
    <link rel="stylesheet" href="new/css/owl.transitions.css">
    <link rel="stylesheet" href="new/css/animate.min.css">
    <link rel="stylesheet" href="new/css/rateit.css">
    <link rel="stylesheet" href="new/css/bootstrap-select.min.css">
    <!-- Icons/Glyphs -->
    <link rel="stylesheet" href="new/css/font-awesome.css">
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Barlow:200,300,300i,400,400i,500,500i,600,700,800"
          rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Roboto:300,400,500,700' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,600italic,700,700italic,800'
          rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <style>
        /* 在引入的css文件中写入这个*/
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body class="cnt-home">
<div id="indexContent" v-cloak>
    <header class="header-style-1">
        <!--最上层-->
        <div class="top-bar animate-dropdown">
            <div class="container">
                <div class="header-top-inner">
                    <div class="cnt-account">
                        <ul class="list-unstyled">
                            <li class="wishlist"><a href="index.html"><span>首页</span></a></li>
                            <li v-if="isLogin" class="check"><a href="javascript:;" @click="logout"><span>退出</span></a></li>
                            <li v-else class="login"><a href="Login.html"><span>登录</span></a></li>
                        </ul>
                    </div>

                    <div v-if="isLogin" class="cnt-block">
                        <ul class="list-unstyled list-inline">
                            <li class="dropdown dropdown-small"> <a href="#" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><span class="value">欢迎你：{{nickName}}</span><b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="MyCart.html">我的预约</a></li>
                                    <li><a href="MyFocus.html">我的关注</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
        <div class="main-header">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-3 logo-holder">
                        <div class="logo"><a href="index.html"> <img src="new/images/logo.png" alt="logo"> </a></div>
                    </div>
                    <div class="col-lg-7 col-md-6 col-sm-8 col-xs-12 top-search-holder">
                        <div class="search-area">
                            <form>
                                <div class="control-group">
                                    <ul class="categories-filter animate-dropdown">
                                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">搜索</a>
                                    </ul>
                                    <input class="search-field" v-model="searchValue" placeholder="Search here..."/>
                                    <a class="search-button"  @click="searchName" href="#"></a></div>
                            </form>
                        </div>
                        <!-- /.search-area -->
                        <!-- ============================================================= SEARCH AREA : END ============================================================= -->
                    </div>
                    <!-- /.top-search-holder -->
                </div>
            </div>
        </div>
    </header>

    <div class="body-content outer-top-xs">
        <div class='container'>
            <div class='row'>
                <div class="col-xs-12 col-sm-12 col-md-3 sidebar">
                    <div class="side-menu animate-dropdown outer-bottom-xs">
                        <div class="head"><i class="icon fa fa-align-justify fa-fw"></i> 服务分类</div>
                        <nav class="yamm megamenu-horizontal">
                            <ul class="nav">
                                <li v-for="(temp,index) in types" v-if="!temp.isComplete" class="dropdown menu-item"><a href="#"
                                                                                                                        class="dropdown-toggle"
                                                                                                                        data-toggle="dropdown"><i
                                        class="icon fa fa-shopping-bag" aria-hidden="true"></i>{{temp.typeName}}</a>
                                    <ul class="dropdown-menu mega-menu">
                                        <li class="yamm-content">
                                            <div class="row">
                                                <div class="col-sm-5 col-md-5">
                                                    <ul class="links list-unstyled">
                                                        <li v-for="(temps,index) in temp.children" @click="toCategory(temps.id,temps.typeName)" v-if="!temps.isComplete"><a href="#">{{temps.typeName}}</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <!-- /.row -->
                                        </li>
                                        <!-- /.yamm-content -->
                                    </ul>
                                </li>
                            </ul>
                            <!-- /.nav -->
                        </nav>
                        <!-- /.megamenu-horizontal -->
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-9 rht-col">
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>分类</el-breadcrumb-item>
                        <el-breadcrumb-item>{{categoryName}}</el-breadcrumb-item>
                    </el-breadcrumb>
                        <div class="clearfix filters-container m-t-10">
                            <div class="row">
                                <div class="col col-sm-6 col-md-3 col-lg-3 col-xs-6">
                                    <div class="filter-tabs">
                                        <ul id="filter-tabs" class="nav nav-tabs nav-tab-box nav-tab-fa-icon">
                                            <li class="active"> <a data-toggle="tab" href="#"><i class="icon fa fa-th-large"></i>Grid</a> </li>
                                        </ul>
                                    </div>
                                    <!-- /.filter-tabs -->
                                </div>
                            </div>
                            <!-- /.row -->
                        </div>
                        <div class="search-result-container ">

                            <div id="myTabContent" class="tab-content category-list">
                                <div class="tab-pane active " id="grid-container">
                                    <div class="category-product">
                                        <div class="row">
                                            <div class="col-sm-6 col-md-4 col-lg-3" v-for="(item,index) in infoList.data">
                                                <div class="item">
                                                    <div class="products">
                                                        <div class="product">
                                                            <div class="product-image">
                                                                <div class="image">
                                                                    <a @click="toDetail(item.id)" href="#">
                                                                        <img  v-for="(itemImg,index) in item.list" :src="itemImg.imgPath" alt="">
                                                                    </a>
                                                                </div>
                                                                <div class="tag new"><span>服务</span></div>
                                                            </div>
                                                            <!-- /.product-image -->

                                                            <div class="product-info text-left">
                                                                <h3 class="name"><a href="#" @click="toDetail(item.id)">{{item.title}}</a></h3>
                                                                <div class="description">{{item.content}}</div>
                                                                <div class="product-price"> <span class="price">¥ {{item.newMoney}}</span> <span class="price-before-discount">¥ {{item.oldMoney}}</span> </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- /.tab-content -->
                            <div style="float:right;" class="clearfix filters-container bottom-row">
                                <el-pagination
                                        background
                                        :current-page="page"
                                        :page-size="size"
                                        @current-change="handleCurrentChange"
                                        layout="prev, pager, next"
                                        :total="total">
                                </el-pagination>
                            </div>

                        </div>
                </div>
            </div>
        </div>
    </div>

    <footer id="footer" class="footer color-bg">
        <div class="copyright-bar">
            <div class="container">
                <div class="col-xs-12 col-sm-4 no-padding copyright">Copyright &copy; 2020.
                </div>
            </div>
        </div>
    </footer>
</div>
<script src="js/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layer/2.3/layer.js"></script>
<script src="js/common.js"></script>

<script src="new/js/bootstrap.min.js"></script>
<script src="new/js/bootstrap-hover-dropdown.min.js"></script>
<script src="new/js/owl.carousel.min.js"></script>
<script src="new/js/echo.min.js"></script>
<script src="new/js/jquery.easing-1.3.min.js"></script>
<script src="new/js/bootstrap-slider.min.js"></script>
<script src="new/js/jquery.rateit.min.js"></script>
<script src="new/js/lightbox.min.js"></script>
<script src="new/js/bootstrap-select.min.js"></script>
<script src="new/js/wow.min.js"></script>
<script src="new/js/scripts.js"></script>

<script>
    var vm = new Vue({
        el: "#indexContent",
        data: {
            categoryId:'',
            categoryName:'',
            isLogin : false,
            userId: '',
            nickname : '',
            types: [],
            page: 1,
            size: 12,
            total: 0,
            infoList:[],
            searchValue: ''
        },
        created: function () {
            var vms = this;
            vms.getCategory()
            vms.checkUser();
            vms.getTypes();
            vms.getInfoList();
        }, //属性过滤器

        methods: {
            searchName(){
                window.localStorage.setItem("searchValue",this.searchValue);
                window.location.reload();
            },
            toDetail(id){
                window.localStorage.setItem("infoId",id);
                window.location.href = 'Detail.html';
            },
            toCategory(id,name){
                this.categoryId = id;
                this.categoryName = name;
                this.getInfoList();
            },
            getCategory(){
                const categoryId = window.localStorage.getItem("categoryId")
                const categoryName = window.localStorage.getItem("categoryName")
                const searchValue = window.localStorage.getItem("searchValue")

                this.categoryId = categoryId;
                this.categoryName = categoryName;
                this.searchValue = searchValue;
                window.localStorage.setItem("categoryId","");
                window.localStorage.setItem("categoryName","");
                window.localStorage.setItem("searchValue","");

            },
            handleCurrentChange(val) {
                const that = this;
                console.log(val)
                const page = that.page;
                if (val === page){
                    return;
                }
                that.page = val;
                that.getInfoList();
            },
            checkUser : function(){
                var that = this;
                const isLogin = window.localStorage.getItem("isLogin");
                if (isLogin){
                    that.userId = window.localStorage.getItem("userId");
                    that.nickName = window.localStorage.getItem("nickName");
                    that.isLogin = true;
                }
            },
            logout : function(){
                window.localStorage.clear();
                window.location.href="index.html";
            },
            getTypes(){
                const  that = this;
                HttpGet("/type/getList",null,function(res){
                    if (res.result == true){
                        that.types = res.data;
                    }else{
                        layer.msg("请稍后重试......",{icon:2,time:1500});
                    }
                })
            },
            getInfoList(){
                const that = this;
                let param = {
                    size : that.size,
                    page : that.page,
                    categoryId:that.categoryId,
                    searchValue:that.searchValue
                }
                HttpGet("/info/getAll",param,function(res){
                    if (res.result == true){
                        that.infoList = res.data;
                        that.total = res.data.total ;
                    }
                })

            },
            toCart(id){
                const that = this;
                const status = 1;
                HttpPost("/order/"+id+"/"+status,null,function(res){
                    if (res.result == true){
                        layer.msg("添加订单成功！",{icon:1,time:1500});
                    }else{
                        layer.msg("添加订单失败！",{icon:2,time:1500});
                    }
                })
            },
            toLike(id){
                const that = this;
                const status = 10;
                HttpPost("/order/"+id+"/"+status,null,function(res){
                    if (res.result == true){
                        layer.msg("添加关注成功！",{icon:1,time:1500});
                    }else{
                        layer.msg("添加关注失败！",{icon:2,time:1500});
                    }
                })
            }

        },


    });
</script>
</body>
</html>

